<template>
    <view class="custom-tabbar fix flex-center fill-base b-1px-t">
        <view
            @tap.stop="changeTab(item)"
            class="flex-center flex-column mt-sm"
            :style="{
                width: 100 / configInfo.tabBar.length + '%',
                color: cur == item.id ? '#606DCE' : '#666',
            }"
            v-for="(item, index) in configInfo.tabBar"
            :key="index"
        >
            <i
                class="iconfont"
                :class="cur == item.id ? item.selected_img : item.default_img"
            ></i>
            <image
                class=""
                :src="cur == item.id ? item.selected_img : item.default_img"
                style="width: 40rpx; height: 40rpx; margin-bottom: 10rpx"
            ></image>
            <view class="text" style="margin-top: 5rpx">{{ item.name }}</view>
        </view>
    </view>
</template>

<script>
import { mapState, mapActions, mapMutations } from "vuex";
export default {
    components: {},
    props: {
        cur: {
            type: Number,
            default() {
                return 0;
            },
        },
    },
    data() {
        return {};
    },
    computed: mapState({
        primaryColor: (state) => state.config.configInfo.primaryColor,
        subColor: (state) => state.config.configInfo.subColor,
        configInfo: (state) => state.config.configInfo,
        commonOptions: (state) => state.user.commonOptions,
        userPageType: (state) => state.user.userPageType,
        activeIndex: (state) => state.order.activeIndex,
    }),
    async mounted() {
        let that = this;
        let sysheight = uni.getSystemInfoSync().windowHeight;
        let { navBarHeight } = that.configInfo;
        setTimeout(() => {
            const query = uni.createSelectorQuery().in(that);
            query
                .select(".custom-tabbar")
                .boundingClientRect((data) => {
                    let curSysHeight = sysheight - data.height - navBarHeight;
                    let configInfo = that.$util.deepCopy(this.configInfo);
                    configInfo.curSysHeight = curSysHeight;
                    configInfo.tabbarHeight = data.height;
                    that.updateConfigItem({
                        key: "configInfo",
                        val: configInfo,
                    });
                })
                .exec();
        }, 600);
    },
    watch: {
        configInfo: {
            handler(newVal, oldVal) {
				if(newVal.tabBar[2].id == 8 && uni.getStorageSync('configInfo').live_switch == 0) return newVal.tabBar.splice(2, 1)
            },
            deep: true,
            immediate: true,
        },
    },
    methods: {
        ...mapActions(["getConfigInfo"]),
        ...mapMutations(["updateConfigItem"]),
        // 点击跳转
        async changeTab(item) {
            console.log("-=-=-=item", item);
            if (!item.id) {
                await this.getConfigInfo();
                let arr = this.configInfo.tabBar.filter((aitem) => {
                    return aitem.name == item.name;
                });
                item = arr[0];
            }
            let { id: index } = item;
            let { activeIndex, cur, userPageType } = this;
            console.log(this.configInfo.tabBar, "tabbar点击跳转");
            if (this.configInfo.ps_switch == 1) {
                let page = {
                    1: `/pages/service`,
                    3: `/pages/dyamicshop?children=2`,
                    5: `/subPages/technician/tabBar/mine`,
                    7: `/wNew/pages/index`,
                    8: `/live/pages/live/liveList?type=2`,
                };
                if (index == cur) return;
                console.log("-=-=-=url", page[index]);
                this.$util.goUrl({
                    url: page[index],
                    openType: `reLaunch`,
                });
            } else {
                let page = {
                    1: `/pages/service`,
                    3: `/subPages/technician/tabBar/dynamic`,
                    5: `/subPages/technician/tabBar/mine`,
                    7: `/wNew/pages/index`,
                    8: `/live/pages/live/liveList?type=2`,
                };
                if (index == cur) return;
                this.$util.goUrl({
                    url: page[index],
                    openType: `reLaunch`,
                });
            }
        },
    },
};
</script>

<style scoped lang="scss">
.custom-tabbar {
    height: 128rpx;
    bottom: 0;
    height: calc(98rpx + env(safe-area-inset-bottom) / 2);
    padding-bottom: calc(env(safe-area-inset-bottom) / 2);

    .iconfont {
        font-size: 40rpx;
    }

    .text {
        font-size: 22rpx;
        margin-top: 5rpx;
        height: 32rpx;
    }
}
</style>
